<template>
  <div>
    <el-button @click="expandTable">点击加载表格</el-button>
    <el-table
      :data="roleList"
      border
      stripe
      size="mini"
      style="margin-top: 20px"
      :header-cell-style="headerCellStyle"
    >
      <!--   展开列：只需加type属性：expand-->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            :data="scope.row.children"
            size="mini"
            border
            stripe
            style="width: 100%; margin-left: 96px"
            :header-cell-style="headerCellStyle"
          >
            <el-table-column type="selection" width="50" reserve-selection />
            <el-table-column
              type="index"
              show-overflow-tooltip
              label="子序号"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column
              label="分项试验"
              show-overflow-tooltip
              min-width="300"
              prop="fxsy"
              align="center"
            />
            <el-table-column
              label="电性测试"
              show-overflow-tooltip
              min-width="300"
              prop="dxcs"
              align="center"
            />
            <el-table-column
              label="分层扫描"
              show-overflow-tooltip
              min-width="300"
              prop="fcsm"
              align="center"
            />
            <el-table-column
              label="分层扫描数量"
              show-overflow-tooltip
              min-width="100"
              prop="sl"
              align="center"
            />
            <el-table-column
              label="试验条件1"
              show-overflow-tooltip
              min-width="100"
              prop="tj1"
              align="center"
            />
            <el-table-column label="试验条件2" min-width="100" prop="tj2" align="center" />
            <el-table-column label="试验条件3" min-width="100" prop="tj3" align="center" />
          </el-table>
        </template>
      </el-table-column>

      <el-table-column type="index" label="#"></el-table-column>
      <!-- 索引列-->
      <el-table-column label="试验项目" prop="xm"></el-table-column>
      <el-table-column label="数量" prop="sl"></el-table-column>
      <el-table-column label="是否在先导试验后进行" prop="jx"></el-table-column>
      <el-table-column label="项目单价" prop="dj"></el-table-column>
      <el-table-column label="计费节点" prop="jd"></el-table-column>
      <el-table-column label="批次" prop="pc"></el-table-column>
      <el-table-column label="项目总价" prop="zj"></el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small"
            >编辑</el-button
          >
          <el-button type="danger" icon="el-icon-delete" size="small"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-setting"
            size="small"
            @click="showSetRinghtDialog(scope.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>-->
    </el-table>
    <el-dialog
      ref="dialog"
      title
      custom-class="dialogCustom"
      :visible.sync="visible"
      width="90%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <template v-if="$slots.title">
        <span slot="title">
          <div class="dialog-qms-title">
            <div>{{ title }}</div>
          </div>
        </span>
      </template>
      <slot>
        <div class="table-container">
          <addColumn></addColumn>
        </div>
      </slot>
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
    addColumn: () => import("./addColumn.vue")
  },
  data() {
    return {
      roleList: [
        {
          xm: "主管",
          sl: "1",
          jx: "1",
          dj: 1,
          jd: 1,
          pc: 1,
          zj: 100,
          children: [
            {
              id: 1,
              fxsy: "试验122222222222222222222222222222222222",
              dxcs: "试验1",
              fcsm: "试验1",
              sl: 10,
              tj1: "条件1",
              tj2: "条件2",
              tj3: "条件3"
            },
            {
              id: 2,
              fxsy: "试验2",
              dxcs: "试验2",
              fcsm: "试验2",
              sl: 10,
              tj1: "条件1",
              tj2: "条件2",
              tj3: "条件3"
            }
          ]
        }
      ],
      visible: false
    };
  },
  mounted() {},
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) return "font-size:12px;font-weight:normal";
    },
    expandTable() {
      this.visible = true;
    }
  }
};
</script>

<style   scoped>
.el-table >>> .table-container {
  overflow-x: auto;
}

.el-table >>> .el-table__body-wrapper {
  display: flex;
  flex-direction: column-reverse;
}
.el-table >>> .el-table__expanded-cell {
  padding: 0 !important;
  overflow-x: hidden;
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 0px; /*滚动条的背景区域的圆角*/
  background-color: rgba(2, 29, 87, 1); /*滚动条的背景颜色*/
  background-color: #fff; /*滚动条的背景颜色*/
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: rgba(2, 29, 87, 1);
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(17, 157, 212), rgb(17, 212, 105));
  border-radius: 5px;
  transition: 1s;
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(rgb(17, 212, 105), rgb(17, 157, 212));
}

.el-dialog__wrapper >>> .dialogCustom {
  height: 88vh !important;
}
.el-dialog__wrapper >>> .dialogCustom:not(.is-fullscreen) {
  margin: 4vh auto !important;
}
.el-dialog__wrapper >>> .el-dialog {
  border-radius: 6px;
}
.el-dialog__wrapper >>> .el-dialog__header {
  padding: 0px;
  font-size: 14px;
  background-color: #f9f9f9;
  color: #666;
  border-radius: 6px 6px 0px 0px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
}
.el-dialog__wrapper >>> .el-dialog__headerbtn {
  top: 15px;
  right: 10px;
  font-weight: 700;
}
.el-dialog__wrapper >>> .el-dialog__title {
  font-size: 14px;
  color: #666;
  padding: 10px;
}
.el-dialog__wrapper >>> .el-dialog__body {
  padding: 10px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  height: calc(100% - 75px);
}
.el-dialog__wrapper >>> .el-dialog__body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.el-dialog__wrapper >>> .el-dialog__body::-webkit-scrollbar-thumb {
  background-color: rgb(187, 187, 187);
  border-radius: 2px;
}
</style>